<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车全选</title>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js" ></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.wrap{
				width: 300px;
				margin: 10px auto;
				
			}
			
		
			table{
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 300px;
			}
			
			th,td{
				border:1px solid #d0d0d0;
				color: #404060;;
				padding: 10px;
			}
			th{
				background-color: blue;
				font: bold 16px;
				color: #fff;
			}
			td{
				font: 14px;
				text-align: center;
			}
			tbody tr{
				background-color: #f0f0f0;
			}
			/*鼠标效果*/
			tbody tr:hover{
				cursor: pointer;
				background-color: #fafafa;
			}
		</style>
	</head>
	<body>
		
		<div class="wrap">
			<div id="bar">
				商品：<input type="text" name="product"/> <br /> 
				价格：<input type="text" name="price"/> <br />
				<input type="button" id="add" value="添加"/> <br />
				<input type="button" id="delPart" value="删除选中"/>
				<input type="button" id="inverse" value="返选"/>
				<input type="button" id="delAll" value="全部删除" />
			</div>
			<table border="" cellspacing="" cellpadding="">
				<thead>
					<tr>
						<th><input type="checkbox" id="cbAll"/> </th>
						<th> 商品</th>
						<th> 价格 </th>
						<th> 操作</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							<input type="checkbox" name="cbox"/>
						</td>
						<td>
							iphone8
						</td>
						<td>8000</td>
						<td > <a href="javascript:void(0)" class="del">删除</a></td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="cbox"/>
						</td>
						<td>
							iphone12
						</td>
						<td>8888</td>
						<td > <a href="javascript:void(0)" class="del">删除</a></td>
					</tr>
					
					<tr>
						<td>
							<input type="checkbox" name="cbox"/>
						</td>
						<td>
							huawei
						</td>
						<td>6900</td>
						<td > <a href="javascript:void(0)" class="del">删除</a></td>
					</tr>
					
					<tr>
						<td>
							<input type="checkbox" name="cbox"/>
						</td>
						<td>
							vivo
						</td>
						<td>4366</td>
						<td > <a href="javascript:void(0)" class="del">删除</a></td>
					</tr>
					
					<tr>
						<td>
							<input type="checkbox" name="cbox"/>
						</td>
						<td>
							oppo
						</td>
						<td>6789</td>
						<td > <a href="javascript:void(0)" class="del">删除</a></td>
					</tr>
					
					
					<tr>
						<td>
							<input type="checkbox" name="cbox"/>
						</td>
						<td>
							ReadMi
						</td>
						<td>3421</td>
						<td > <a href="javascript:void(0)" class="del">删除</a></td>
					</tr>
					
				</tbody>
				
			</table>
		</div>
	</body>
	<script>
		//方法一
		/*全选的设置：https://www.jb51.net/article/114876.htm*/
		$("#cbAll").click(function(){
			//全选取消
		    $("input[name=cbox]").prop('checked',$(this).prop('checked'));
		})
		
		//方法二
		//使用if else完成
		
		
		
		//删除功能
		$(".del").each(function(){
			$(this).click(function(){
				$(this).parent().parent().remove();
			})	
		})
		
		//添加功能
		$("#add").click(function(){
			var product = $("input[name = product]").val();
			var price = $("input[name = price]").val();
			var str = '<tr>'+ 
			               '<td> <input type="checkbox" name="cbox"/> </td>' +
						'<td>'+ product +'</td>' +
						
						'<td>'+price+'</td>'+
						'<td > <a href="javascript:void(0)" class="del">删除</a></td>'+
					'</tr>';
				$ntr = $(str);
				
				$("table").append($ntr);
				
				$ntr.find("a").click(function(){
					$(this).parent().parent().remove();
				});				
		})
		
		//删除选中
		$("#delPart").click(function(){
			$("#cbAll").prop('checked',false);
			$("input[name=cbox]").each(function(){
				if($(this).prop('checked')){
					$(this).parent().parent().remove();
				}
			})
		})
		
		//反选
		$("#inverse").click(function(){
			$("#cbAll").prop('checked',false);
			$("input[name=cbox]").each(function(){
				if($(this).prop('checked')){
					$(this).prop('checked',false);
				}else{
					$(this).prop('checked',true);
				}
			})
		})
		
		//全部删除(清空tbody就可以了)
		$("#delAll").click(function(){
			$("tbody").html("");
		})
	</script>
</html>
